<template>
	<view class="pages">
		<view class="cu-custom">
			<view v-if="user.isLogin" class="cu-bar fixed cuImg" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				'background-color':`rgba(255,255,255,${1})`
			}">
				<view class="content text-bold fixed" :style="{top: ($wanlshop.wanlsys().top) - 6 + 'px'}" @click="back">
					<uni-icons type="left" size="22" :color="`${headColor}`"></uni-icons>
					<view class="contentText" :style="{color:`${headColor}`}">{{common.store && common.store.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- <s-navbar ref="hxnb" :config="config">
			<view slot="left" style="height: 100%;">
				<view class="address flex align-center" style="height: 100%;">
					<text style="font-size: 32rpx;">{{common.store && common.store.name}}</text>
				</view>
			</view>
		</s-navbar> -->
		
		<swiper v-if="common.store" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" :circular="true" class="swiper" :current="current" @change="changeBanner" :style="{marginTop:$wanlshop.wanlsys().height + 'px'}">
			<swiper-item v-for="(item,index) in common.store.images_text" :key="index">
				<!-- <view class="swiper-item" :style="{'background-image':`url(${$wanlshop.oss(item)})`}"> -->
				<view class="swiper-item">
					<image :src="$wanlshop.oss(item)" class="swiperImg" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 堂食外卖选项 -->
		<view class="table">
			<view class="tableImg">
				<image src="/static/restaurant/index/index1.png" class="tableBg"></image>
				<view class="tableFlex" @tap="$wanlshop.auth(`/pages/restaurant/index/shopping?t=2`)">
					<view class="tableView">
						<image src="/static/restaurant/index/index2.png" class="tableViewImg"></image>
						<view class="tableViewText">堂食点餐</view>
					</view>
					<view class="hx"></view>
					<view class="tableView" @tap="$wanlshop.auth(`/pages/restaurant/index/shopping?t=1`)">
						<image src="/static/restaurant/index/index3.png" class="tableViewImg"></image>
						<view class="tableViewText">外送点餐</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日推荐 -->
		<s-skeleton type="waterfall" :loading="loading3"></s-skeleton>
		<view class="sell">
			<image src="/static/restaurant/index/sell.png" class="sellImg" mode="widthFix"></image>
			<view class="sellFlex" v-if="sellList && sellList.length > 0">
				<view class="sellView" v-for="(item,index) in sellList" :key="index"
					@tap="$wanlshop.auth('/pages/restaurant/index/shopping?t=2')">
					<image :src="$wanlshop.oss(item.image)" class="sellViewImg" mode="aspectFill"></image>
					<view class="sellViewTitle text-cut-1">{{item.title}}</view>
					<view class="sales">销量 {{item.sales}}</view>
					<view class="sellViewFlex">
						<view class="sellViewNum">￥{{item.price}}</view>
						<view class="sellViewAdd" :style="{borderColor:common.store.shop_status == 1 ? '#FF2222' : '#ccc'}"><uni-icons type="plusempty" size="18" :color="common.store.shop_status == 1 ? '#FF2222' : '#ccc'"
								@tap.stop="addCarStorage(item)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<s-empty padding="100rpx 0" v-if="sellList && sellList.length == 0"></s-empty>
		</view>
		<u-tabbar v-model="currentTab" :list="listTab" active-color="#FA802A" @change="jump"></u-tabbar>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				config:{
					title: "",
					leftSlot:false,
					backgroundColor:'#ffffff'
				},
				loading3: true,
				latitude: '',
				longitude: '',
				sellList: null,
				pageScrollTop: 0, // 页面滚动距离
				opacity: 0,
				headColor: '#333',
				current:0,
				currentTab: 0, // 底部
				listTab: [{
						"pagePath": "/pages/restaurant/index",
						"iconPath": "/static/restaurant/tabbar/index.png",
						"selectedIconPath": "/static/restaurant/tabbar/indexHL.png",
						"text": "首页"
					}, 
					{
						"pagePath": "/pages/restaurant/user",
						"iconPath": "/static/restaurant/tabbar/my.png",
						"selectedIconPath": "/static/restaurant/tabbar/myHL.png",
						"text": "我的"
					}
				], // 底部
			}
		},
		computed: {
			...mapState(['user', 'common']),
			
		},
		// 页面滚动监听
		// onPageScroll(e) {
		// 	this.pageScrollTop = Math.floor(e.scrollTop);
		// 	if (e.scrollTop <= 90) {
		// 		uni.setNavigationBarColor({
		// 			frontColor: '#ffffff',
		// 			backgroundColor: '#ffffff',
		// 			animation: {
		// 				duration: 1
		// 			}
		// 		})
		// 		this.headColor = '#fff'
		// 	} else if (e.scrollTop > 90) {
		// 		uni.setNavigationBarColor({
		// 			frontColor: '#000000',
		// 			backgroundColor: '#ffffff',
		// 			animation: {
		// 				duration: 1
		// 			}
		// 		})
		// 		this.headColor = '#000'
		// 	}
		// },
		onLoad(option) {
			
		},
		onShow() {
			this.loadData()
			this.getStore()
			uni.setNavigationBarTitle({
				title:this.common.store && this.common.store.name
			})
			this.config.title = this.common.store && this.common.store.name
		},
		methods: {
			jump(e) {
				uni.navigateTo({
					url: this.listTab[e].pagePath
				})
			},
			changeBanner(e) {
				this.current = e.detail.current
				this.$refs.hxnb.init()
			},
			back() {
				uni.switchTab({
					url:'/pages/user'
				})
			},
			async addCarStorage(data) {
				if(this.common.store.shop_status == 1) {
					let res = await this.$api.addCarStorage({
						type: 'add',
						data: {
							goods_id: data.id,
							number: 1
						}
					});
					if (res.code == 1) {
						this.$wanlshop.auth('/pages/restaurant/index/shopping?t=2')
					}
				} else {
					this.$wanlshop.auth('/pages/restaurant/index/shopping?t=2')
				}
			},
			async loadData() {
				let res = await this.$api.getGoodsList({
					page: 1,
					is_recommand: 1,
					order_by: 'sale_desc',
				});
				if (res.code == 1) {
					this.loading3 = false;
					this.sellList = res.data.data;
				}
			},
			
			async getStore() {
				let res = await this.$api.getStore({
					storeid: this.common.store && this.common.store.id
				});
				if (res.code == 1) {
					if(res.data.content) {
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture)}">`;
							return img;
						});
					}
					this.$store.dispatch('common/setStore', res.data);
					console.log(this.common.store)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.swiper {
		width: 100%;
		height: 500rpx;
		position: relative;

		.swiper-item {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: 100%;
			.swiperImg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		width: 100% !important;
		display: flex;
		align-items: center;
		text-align: left;
		padding: 0 30rpx;
		cursor: pointer;
	}



	.table {
		width: 100%;
		height: 282rpx;
		padding: 0 24rpx;
		position: sticky;
		margin-top: -50rpx;

		.tableImg {
			width: 100%;
			height: 100%;
			position: relative;

			.tableBg {
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.tableFlex {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;

				.tableView {
					text-align: center;

					.tableViewImg {
						width: 116rpx;
						height: 117rpx;
					}

					.tableViewText {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
				}

				.hx {
					width: 2rpx;
					height: 184rpx;
					background: #DADADA;
					margin-left: 114rpx;
					margin-right: 114rpx;
				}

			}
		}
	}

	.sell {
		width: 100%;
		height: auto;
		padding: 30rpx 24rpx;

		.sellImg {
			width: 325rpx;
			height: 70rpx;
			display: block;
			margin: 0 auto;
		}

		.sellFlex {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.sellView {
				width: 336rpx;
				height: 468rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				padding: 18rpx;
			}

			.sellView:nth-child(2n) {
				margin-left: 30rpx;
			}

			.sellViewImg {
				width: 300rpx;
				height: 300rpx;
				// background: #f00;
				border-radius: 16rpx;
				margin: 0 auto;
				display: block;
			}

			.sellViewTitle {
				margin-top: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}

			.sales {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}

			.sellViewFlex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sellViewNum {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FF2222;
				}

				.sellViewAdd {
					width: 48rpx;
					height: 48rpx;
					border: 4rpx solid transparent;
					border-radius: 100%;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
	}

		.contentText {
			font-size: 32rpx;
			display: inline-block;
			width: calc(100% - 22rpx);
			text-align: center;
		}
</style>